<template>
  <div class="home-recommend">
    <ul>
      <li v-for="item in recommend" :key="item.sort">
        <a :href="item.link"><img :src="item.image" ></a>
        <p>{{item.title}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    recommend: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  methods: {},
  components: {},
  computed: {},
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.home-recommend{
  margin: 10px 0;
  ul{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    li{
      flex: 1;
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      a{
        font-size: 0;
        text-align: center;
        img{
          width: 75%;
        }
      }
      p{
        padding-top: 5px;
        font-size: 14px;
      }
    }
  }
}
</style>